<template>
  <view class="alumni-activity-list">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
      				<text class='icon tn-icon-left'></text>
      				</text></text>
      			</view>
      <view slot="title" class="nav-title">{{ currentOrg.name }}活动</view>
    </tn-nav-bar>
    
    <!-- 组织方信息头部 -->

   <view class='org-header' :style="{
     backgroundImage: `url(${currentOrg.headerImage || ''})`,
     backgroundSize: 'cover',
     backgroundPosition: 'center'
   }">
     <view class="org-info tn-flex tn-flex-row-center tn-padding-lg">
       <view class="org-avatar tn-shadow">
         <view class="tn-shadow-blur" :style="{
           backgroundImage: `url(${currentOrg.avatar || ''})`,
           width: '120rpx',
           height: '120rpx',
           backgroundSize: 'cover',
           borderRadius: '50%'
         }">
         </view>
       </view>
       <view class="org-detail tn-margin-left-sm">
         <view class="tn-text-xl tn-text-bold tn-color-white">{{ currentOrg.name || '加载中...' }}</view>
         <view class="tn-text-sm tn-color-white/80 tn-margin-top-xs">
           已举办活动 {{ currentOrg.hostedCount || 0 }} 场 · 累计参与 {{ currentOrg.participantCount || 0 }}+ 人
         </view>
       </view>
     </view>
     
     <!-- 数据统计 -->
     <view class="stats tn-flex tn-bg-white/20 tn-round-lg tn-margin-horizontal-md tn-padding-md">
       <view class="stat-item tn-flex-1 tn-text-center">
         <view class="tn-text-xl tn-text-bold tn-color-white">{{ totalActivities }}</view>
         <view class="tn-text-xs tn-color-white/80">总活动数</view>
       </view>
       <view class="stat-item tn-flex-1 tn-text-center">
         <view class="tn-text-xl tn-text-bold tn-color-white">{{ upcomingActivities }}</view>
         <view class="tn-text-xs tn-color-white/80">即将开始</view>
       </view>
       <view class="stat-item tn-flex-1 tn-text-center">
         <view class="tn-text-xl tn-text-bold tn-color-white">{{ completedActivities }}</view>
         <view class="tn-text-xs tn-color-white/80">已结束</view>
       </view>
     </view>
   </view>

    
    <!-- 活动筛选标签 -->
    <view class="filter-tabs tn-margin-top-sm">
      <tn-tabs 
        :list="filterList" 
        :current="currentFilter" 
        :isScroll="true" 
        activeColor="#008000" 
        @change="changeFilter">
      </tn-tabs>
    </view>
    
    <!-- 活动列表 -->
    <view class="activity-list tn-margin">
      <block v-for="(item, index) in filteredActivities" :key="index">
        <view class="activity-item tn-bg-white tn-round-lg tn-shadow tn-margin-bottom-sm" @click="goToActivityDetail(item.id)">
          <!-- 活动封面图 -->
         <view class="activity-img" :style="{
           backgroundImage: `url(${item.mainImage})`
         }">
            <view :class="item.status=='upcoming'?'status-upcoming':'status-completed'">
              {{ item.status=='upcoming'?'即将开始':'已结束' }}
            </view>
          </view>
          
          <!-- 活动信息 -->
          <view class="activity-info tn-padding-sm">
            <view class="activity-title tn-text-bold tn-text-lg tn-line-clamp-1">{{ item.title }}</view>
            
            <view class="activity-meta tn-margin-top-xs tn-flex tn-flex-row-between">
              <view class="meta-item tn-flex tn-align-items-center tn-color-gray">
                <text class="tn-icon-calendar tn-text-sm"></text>
                <text class="tn-text-sm tn-margin-left-xs">{{ item.dateRange }}</text>
              </view>
              <view class="meta-item tn-flex tn-align-items-center tn-color-gray">
                <text class="tn-icon-map tn-text-sm"></text>
                <text class="tn-text-sm tn-margin-left-xs">{{ item.location }}</text>
              </view>
            </view>
            
            <!-- 活动标签 -->
            <view class="activity-tags tn-margin-top-xs">
              <view v-for="(tag, tIdx) in item.tags" :key="tIdx" class="tag-item tn-bg-gray--light tn-round tn-text-xs tn-padding-xs tn-margin-right-xs">
                {{ tag }}
              </view>
            </view>
            
            <!-- 参与人数 -->
            <view class="activity-participants tn-margin-top-xs tn-flex tn-justify-content-between">
              <view class="tn-color-gray tn-text-sm">
                <text class="tn-icon-user tn-margin-right-xs"></text>
                已报名 {{ item.participantCount }} 人
              </view>
              <view class="tn-text-sm tn-color-gray">
                发布于 {{ item.publishDate }}
              </view>
            </view>
          </view>
        </view>
      </block>
      
      <!-- 空状态 -->
      <view v-if="filteredActivities.length === 0" class="empty-state tn-text-center tn-padding-xl">
        <view class="tn-icon-calendar tn-text-5xl tn-color-gray/50 tn-margin-bottom-sm"></view>
        <view class="tn-color-gray">暂无相关活动</view>
      </view>
    </view>
    
    <!-- 底部边距 -->
    <view class='tn-tabbar-height'></view>
  </view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
  name: 'AlumniActivityList',
  mixins: [template_page_mixin],
  data() {
    return {
      // 筛选标签
      filterList: [
        { name: '全部活动' },
        { name: '即将开始' },
        { name: '已结束' },
        { name: '校友返校' },
        { name: '行业交流' },
        { name: '招聘专场' }
      ],
      currentFilter: 0, // 默认选中全部活动
      
      // 活动统计数据
      totalActivities: 0,
      upcomingActivities: 0,
      completedActivities: 0,
      
      // 当前组织信息
      currentOrg: {
        id: '',
        name: '加载中...',
        avatar: '',
        headerImage: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.IaWl0pvx-xmSMDllKtdsoQAAAA?w=292&h=208&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
        hostedCount: 0,
        participantCount: 0
      },
      
      // 所有活动数据
      activities: []
    }
  },
  onLoad(options) {
    // 获取传入的组织方ID
    if (options.orgId) {
      // 根据组织ID请求数据
      this.fetchOrgData(options.orgId)
    } else {
      // 没有ID时的默认处理
      uni.showToast({
        title: '参数错误',
        icon: 'error'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  computed: {
    // 根据筛选条件过滤活动
    filteredActivities() {
      switch (this.currentFilter) {
        case 0: // 全部活动
          return this.activities
        case 1: // 即将开始
          return this.activities.filter(item => item.status === 'upcoming')
        case 2: // 已结束
          return this.activities.filter(item => item.status === 'completed')
        case 3: // 校友返校
          return this.activities.filter(item => item.tags.includes('校友返校'))
        case 4: // 行业交流
          return this.activities.filter(item => item.tags.includes('行业交流'))
        case 5: // 招聘专场
          return this.activities.filter(item => item.tags.includes('招聘专场'))
        default:
          return this.activities
      }
    }
  },
  methods: {
    // 获取组织信息和活动数据
    fetchOrgData(orgId) {
      // 模拟加载中状态
      uni.showLoading({
        title: '加载中...'
      })
      
      // 实际项目中这里应该是接口请求
      // 模拟不同组织的数据
      const mockOrgs = {
        // 吉林农科院校友会
        '1': {
          id: '1',
          name: '吉林农科院校友会',
          avatar: '/static/学校logo.jpg',
          headerImage: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.IaWl0pvx-xmSMDllKtdsoQAAAA?w=292&h=208&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
          hostedCount: 12,
          participantCount: 3200,
          activities: [
            {
              id: 101,
              title: '2024届吉林农科院校友返校日活动',
              mainImage: '/static/hd4.jpg',
              dateRange: '2024-06-15 至 2024-06-16',
              location: '吉林农科院东校区',
              status: 'upcoming',
              tags: ['校友聚会', '免费'],
              participantCount: 238,
              publishDate: '2024-05-10'
            },
            {
              id: 102,
              title: '长春地区校友春季联谊会',
              mainImage: '/static/hd5.png',
              dateRange: '2024-04-15',
              location: '长春市农业展览馆',
              status: 'completed',
              tags: ['地区联谊', '付费'],
              participantCount: 156,
              publishDate: '2024-03-20'
            },
            {
              id: 103,
              title: '2023届校友毕业一周年返校活动',
              mainImage: '/static/hd2.png',
              dateRange: '2024-06-30 至 2024-07-01',
              location: '吉林农科院西校区',
              status: 'upcoming',
              tags: ['校友返校', '免费'],
              participantCount: 189,
              publishDate: '2024-05-25'
            }
          ]
        },
        // 吉林省农业协会
        '2': {
          id: '2',
          name: '吉林省农业协会',
          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_agri.jpg',
          headerImage: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.1f8_2R7qQr6nH1l5lY6eLwHaE8?w=274&h=183&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
          hostedCount: 8,
          participantCount: 2500,
          activities: [
            {
              id: 201,
              title: '农业科技创新论坛',
              mainImage: 'https://resource.tuniaokj.com/images/activity/activity9.jpg',
              dateRange: '2024-07-10 至 2024-07-12',
              location: '长春国际会议中心',
              status: 'upcoming',
              tags: ['行业交流', '学术'],
              participantCount: 320,
              publishDate: '2024-06-01'
            },
            {
              id: 202,
              title: '乡村振兴战略研讨会',
              mainImage: 'https://resource.tuniaokj.com/images/activity/activity7.jpg',
              dateRange: '2024-06-25',
              location: '吉林省农业农村厅会议室',
              status: 'upcoming',
              tags: ['行业交流', '研讨会'],
              participantCount: 98,
              publishDate: '2024-06-05'
            }
          ]
        },
        // 农科院就业指导中心
        '3': {
          id: '3',
          name: '农科院就业指导中心',
          avatar: 'https://resource.tuniaokj.com/images/blogger/avatar_job.jpg',
          headerImage: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.XcGBF7k3D9v7qZJ1YJ1N4gHaEK?w=306&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
          hostedCount: 5,
          participantCount: 1800,
          activities: [
            {
              id: 301,
              title: '校友企业校园招聘会',
              mainImage: 'https://resource.tuniaokj.com/images/activity/activity8.jpg',
              dateRange: '2024-05-20',
              location: '农科院体育馆',
              status: 'completed',
              tags: ['招聘专场', '就业'],
              participantCount: 450,
              publishDate: '2024-04-10'
            },
            {
              id: 302,
              title: '农业行业职业规划讲座',
              mainImage: 'https://resource.tuniaokj.com/images/activity/activity16.jpg',
              dateRange: '2024-09-15',
              location: '农科院学术报告厅',
              status: 'upcoming',
              tags: ['就业指导', '免费'],
              participantCount: 0,
              publishDate: '2024-06-10'
            }
          ]
        }
      }
      
      // 模拟接口延迟
      setTimeout(() => {
        // 获取对应组织的数据
        const orgData = mockOrgs[orgId] || mockOrgs['1']
        
        // 更新组织信息
        this.currentOrg = orgData
        
        // 更新活动数据
        this.activities = orgData.activities
        
        // 计算统计数据
        this.totalActivities = orgData.activities.length
        this.upcomingActivities = orgData.activities.filter(item => item.status === 'upcoming').length
        this.completedActivities = orgData.activities.filter(item => item.status === 'completed').length
        
        uni.hideLoading()
      }, 1000)
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 切换筛选条件
    changeFilter(index) {
      this.currentFilter = index
    },
    
    // 跳转到活动详情页
    goToActivityDetail(activityId) {
      this.tn('/circlePages/details', { id: activityId })
    },
    
    // 页面跳转通用方法
    tn(url, params) {
      let query = ''
      if (params) {
        Object.keys(params).forEach(key => {
          query += `${key}=${params[key]}&`
        })
        query = query.slice(0, -1)
        url += `?${query}`
      }
      uni.navigateTo({ url })
    }
  }
}
</script>
<style lang="scss" scoped>
.alumni-activity-list {
  background-color: #F8F7F3;
  min-height: 100vh;
}
/* 自定义导航栏返回按钮样式 */
.tn-custom-nav-bar__back {
	width: 60%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
	font-size: 18px;

	.icon {
		display: block;
		flex: 1;
		margin: auto;
		text-align: center;
	}
}

/* 导航栏样式 */
.nav-title {
  color: #FFFFFF;
  font-size: 36rpx;
  font-weight: bold;
}

/* 组织头部样式 */
.org-header {
  background-size: cover;
  background-position: center;
  padding-top: 120rpx; /* 适配导航栏高度 */
  padding-bottom: 40rpx;
}

.org-info {
  align-items: center;
}

.org-avatar {
  border: 4rpx solid rgba(255, 255, 255, 0.8);
}

.stats {
  backdrop-filter: blur(10rpx);
  margin-top: 20rpx;
}

.stat-item {
  border-right: 1rpx solid rgba(255, 255, 255, 0.3);
  &:last-child {
    border-right: none;
  }
}

/* 筛选标签样式 */
.filter-tabs {
  padding: 0 20rpx;
  background-color: #FFFFFF;
}

/* 活动列表样式 */
.activity-list {
  padding-top: 10rpx;
}

.activity-item {
  overflow: hidden;
  transition: transform 0.2s;
  &:hover {
    transform: translateY(-5rpx);
  }
}

.activity-img {
  width: 100%;
  height: 240rpx;
  background-size: cover;
  background-position: center;
  position: relative;
}

.status-upcoming {
  position: absolute;
  top: 15rpx;
  left: 15rpx;
  background-color: #00B42A;
  color: white;
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.status-completed {
  position: absolute;
  top: 15rpx;
  left: 15rpx;
  background-color: #888888;
  color: white;
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.activity-title {
  color: #333333;
  line-height: 1.5;
}

.meta-item {
  flex-shrink: 0;
}

.activity-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  color: #666666;
}

.activity-participants {
  padding-top: 10rpx;
  border-top: 1rpx solid #F5F5F5;
}

/* 空状态样式 */
.empty-state {
  margin-top: 100rpx;
}

/* 底部边距 */
.tn-tabbar-height {
  min-height: 100rpx;
  height: calc(120rpx + env(safe-area-inset-bottom) / 2);
}
</style>